<template>
    <div class="select_pull">
        <div :class="isSelect?'select_div select_on_div':'select_div select_off_div'">
            <div class="select_title">信息收集：</div>
            <div class="select_content"><el-input v-model="content" @keydown.enter.native="doSelected"></el-input></div>
            <div class="select_button"><el-button type="primary" @click="doSelected" v-loading.fullscreen.lock="loading">搜索</el-button></div>
        </div>
        <div class="result_content" v-if="isSelect">
            <div class="result_content_list" v-for="(item, index) in dataList">
                <div class="result_content_title">{{ item.caseName }}</div>
                <div class="result_content_content">{{ item.remarks }}</div>
                <div class="tabs_list_div">
                    <div class="tabs_title">入口信息：</div>
                    <div class="tabs_content">
                        <template v-for="(temp, index) in item.appList">
                            {{temp.appName}} ：{{temp.ipPort}}；MD5:{{temp.appMd5}} ||
                        </template>
                    </div>
                </div>
                <div class="tabs_list_div">
                    <div class="tabs_title">服务器：</div>
                    <div class="tabs_content">
                        <template v-for="(temp, index) in item.serverList">
                            {{temp.serverType}} ：{{temp.ipPort}} ||
                        </template>
                    </div>
                </div>
                <div class="tabs_list_div">
                    <div class="tabs_title">插件信息：</div>
                    <div class="tabs_content">
                        <template v-for="(temp, index) in item.websiteList">
                            {{temp.typeName}} ：{{temp.contentInfo}} ||
                        </template>
                    </div>
                </div>
                <div class="tabs_list_div">
                    <div class="tabs_title">人员信息：</div>
                    <div class="tabs_content">
                        <template v-for="(temp, index) in item.personList">
                            {{temp.personName}} ||
                        </template>
                    </div>
                </div>
            </div>
            <pagination :current-page="currentPage" :layout="layout" :page-size="pageSize"
                        :total="total" @currentChange="handleCurrentChange">
            </pagination>
        </div>
    </div>
</template>

<script>
import Pagination from "./pagination/pagination";
import PageList from "@/views/grid/pageList.vue";

export default {
    name: "home",
    components: {PageList, Pagination},
    data() {
        return {
            loading: false,
            isSelect: false,

            dataList: [],
            total: 0,
            currentPage: 1,
            layout: "total, prev, pager, next",

            content: '',
            pageNum: 1,

        }
    },
    methods: {
        handleCurrentChange(val) {
            this.pageNum = val;
            this.doSelected();
        },
        doSelected() {
            if (this.content == '' || this.content == null) {
                this.isSelect = false;
                this.total = 0;
                this.dataList = [];
            } else {
                this.loading = true;
                this.$axios.post("/caseLegal/getPageList", {
                    content: this.content,
                    field: 'create_time',
                    order: 'desc',
                    pageSize: 20,
                    pageNum: this.pageNum,
                }).then(res => {
                    this.isSelect = true;
                    this.total = res.data.total;
                    this.dataList = res.data.rows;
                    this.loading = false;
                }).catch(err => {
                    this.$message.error(err.message);
                    this.loading = false;
                })
            }
        },
    }
}
</script>

<style lang="scss">
.select_pull{
    width: 100%;
    height: 100%;
    background-color: #3c3c3c;
    overflow: auto;

    .select_div{

        .select_title{
            font-size: 20px;
            height: 20px;
            line-height: 20px;
            margin: 10px;
            float: left;
            color: #EBEEF5;
        }

        .select_button {
            float: left;

            .el-button {
                padding: 0 20px;
                height: 40px;
                line-height: 40px;
                background-color: #409EFF;
                color: white;
            }
        }
    }

    .select_off_div{
        margin-left: calc((100vw - 600px)/2);
        margin-top: calc((100vh - 60px)/2);

        .select_content {
            width: 400px;
            margin-right: 10px;
            float: left;
        }
    }

    .select_on_div{
        margin-top: 20px;

        .select_content {
            width: 800px;
            margin-right: 10px;
            float: left;
        }
    }

    .result_content{
        color: #EBEEF5;
        margin: 10px 10px 10px 80px;
        width: 800px;

        .result_content_list {
            margin: 20px 0 0 20px;

            .result_content_title{
                font-weight: bold;
                font-size: 24px;
                height: 30px;
                line-height: 30px;
            }

            .result_content_content{
                font-size: 16px;
                line-height: 30px;
            }

            .tabs_list_div{
                .tabs_title{
                    font-weight: bold;
                    font-size: 16px;
                    line-height: 30px;
                    float: left;
                }
                .tabs_content{
                    font-size: 16px;
                    line-height: 30px;
                    float: left;
                }
            }

        }

    }

}

</style>